<template>
  <div>
    <!-- 结案详细信息 -->
    <el-form
	  v-loading.fullscreen.lock="fullLoading"
	  element-loading-text="拼命加载中"
      label-width="200px"
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>结案金额</span>
        </div>
        <el-row type="flex" justify="start">
          <el-form-item label="身故赔付:" prop="deathAmountYuan">
            <el-input
              v-model="dataForm.deathAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="残疾赔付:" prop="disabilityAmountYuan">
            <el-input
              v-model="dataForm.disabilityAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="start">
          <el-form-item label="医疗费用赔付:" prop="treatmentAmountYuan">
            <el-input
              v-model="dataForm.treatmentAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="误工费赔付:" prop="delayWorkAmountYuan">
            <el-input
              v-model="dataForm.delayWorkAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="start">
          <el-form-item
            label="伤残鉴定费:"
            prop="disabilityAppraisalAmountYuan"
          >
            <el-input
              v-model="dataForm.disabilityAppraisalAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item
            label="伤残鉴定级别:"
            prop="disabilityAppraisalLevel"
          >
            <el-select
              v-model="dataForm.disabilityAppraisalLevel"
              style="width: 152px"
            >
              <el-option
                v-for="item in Consts.disabilityAppraisalLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="start">
          <el-form-item label="公共保额赔付:" prop="publicAmountYuan">
            <el-input
              v-model="dataForm.publicAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="法律雇主责任条款赔付:" prop="employerAmountYuan">
            <el-input
              v-model="dataForm.employerAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="start">
          <el-form-item label="第三方责任赔付金额:" prop="thirdAmountYuan">
            <el-input
              v-model="dataForm.thirdAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="其它保险赔付金额:" prop="otherAmountYuan">
            <el-input
              v-model="dataForm.otherAmountYuan" @change="changeSumAmount()"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="start">
          <el-form-item label="赔付总金额:" prop="totalAmountYuan">
            <el-input
              v-model="dataForm.totalAmountYuan" readonly
              placeholder=""
            ></el-input>
          </el-form-item>
		  <el-form-item label="申请赔付金额:" prop="applyAmountYuan">
		    <el-input
		      v-model="dataForm.applyAmountYuan"
		      placeholder=""
		    ></el-input>
		  </el-form-item>
		  <el-form-item label="自费金额:" prop="selfAmountYuan">
		    <el-input
		      v-model="dataForm.selfAmountYuan"
		      placeholder=""
		    ></el-input>
		  </el-form-item>
        </el-row>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>结案材料</span>
        </div>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="协议中标明的资料:"
              prop="informationIndicatedUploadFlag"
            >
              <el-upload
                class="upload-demo"
                drag
                action="#"
				ref="informationIndicatedUpload"
                :data="informationIndicated"
                :file-list="informationIndicatedFileList"
                :on-preview="handlePreview"
                :http-request="submitFileUpload"
                :on-remove="handleFileRemove"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结案报告:" prop="closingReportUploadFlag">
              <el-upload
                class="upload-demo"
                drag
                action="#"
				ref="closingReportUpload"
                :data="closingReport"
                :file-list="closingReportFileList"
                :on-preview="handlePreview"
                :http-request="submitFileUpload"
                :on-remove="handleFileRemove"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="决算书:" prop="finalStatementUploadFlag">
              <el-upload
                class="upload-demo"
                drag
                action="#"
				ref="finalStatementUpload"
                :data="finalStatement"
                :file-list="finalStatementFileList"
                :on-preview="handlePreview"
                :http-request="submitFileUpload"
                :on-remove="handleFileRemove"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                rows="3"
                v-model="dataForm.remark"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>上传理赔款支付情况</span>
        </div>
        <el-row>
          <el-form-item label="付款凭证:" prop="paymentVoucherUploadFlag">
            <el-upload
              class="upload-demo"
              drag
              action="#"
			  ref="paymentVoucherUpload"
              :data="paymentVoucher"
              :file-list="paymentVoucherFileList"
              :on-preview="handlePreview"
              :http-request="submitFileUpload"
              :on-remove="handleFileRemove"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="打款支付时间:" prop="payTime">
            <el-date-picker
              v-model="dataForm.payTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择打款支付时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-card>
      <el-row type="flex" justify="center" style="margin-top: 20px">
          <el-form-item>
            <el-button
              type="primary"
              @click="save('save')"
              :loading="saveLoading"
              >保存</el-button
            >
            <el-button v-if="claimSettlement.caseStatus == 2 || claimSettlement.caseStatus == 5"
              @click="save('finish')"
              type="primary"
              :loading="saveLoading"
              >确认结案</el-button
            >
            <el-button v-if="claimSettlement.caseStatus == 2"
              @click="litigation()"
              type="primary"
              :loading="saveLoading"
              >诉讼</el-button
            >
          </el-form-item>
        </el-row>
    </el-form>
	<PreviewFile ref="previewFileRef"></PreviewFile>
  </div>
</template>

<script>
import { isMoney } from "@/utils/validate";
import PreviewFile from '@/components/previewFile.vue';

export default {
  data() {
    // 自定义规则
    var validateMoney = (rule, value, callback) => {
		if(!value || value == 0){
			callback()
		}
      // if(this.method == 'save' && !value){
      //   callback();
      // }
      // if(this.method == 'finish' && !value && value != 0){
      //   callback(new Error("金额不能为空"));
      // }
      console.log("value", value)
      if (!isMoney(value)) {
        callback(new Error("金额格式错误(仅可保留两位小数)"));
      } else {
        callback();
      }
    };
    var validateInformationIndicatedFile = (rule, value, callback) => {
		callback()
      // if(this.method == 'save'){
      //   callback();
      // }
      // if (value <= 0) {
      //   callback(new Error("请添加协议中标明的资料"));
      // } else {
      //   callback();
      // }
    };
    var validateClosingReportFile = (rule, value, callback) => {
		callback()
      // if(this.method == 'save'){
      //   callback();
      // }
      // if (value <= 0) {
      //   callback(new Error("请添加结案报告"));
      // } else {
      //   callback();
      // }
    };
    var validateFinalStatementFile = (rule, value, callback) => {
		callback()
      // if(this.method == 'save'){
      //   callback();
      // }
      // if (value <= 0) {
      //   callback(new Error("请添加决算书"));
      // } else {
      //   callback();
      // }
    };
    var validatePaymentVoucherFile = (rule, value, callback) => {
		callback()
      // if(this.method == 'save'){
      //   callback();
      // }
      // if (value <= 0) {
      //   callback(new Error("请添加付款凭证"));
      // } else {
      //   callback();
      // }
    };
    var validatePayTime = (rule, value, callback) => {
		callback()
      // if(this.method == 'save' && !value){
      //   callback();
      // }
      // if (this.method == 'finish' && !value) {
      //   callback(new Error("请选择打款付款时间"));
      // } else {
      //   callback();
      // }
    };
    var validateRemark = (rule, value, callback) => {
		callback()
      // if(this.method == 'save' && !value){
      //   callback();
      // }
      // if (this.method == 'finish' && !value) {
      //   callback(new Error("请输入备注"));
      // } else {
      //   callback();
      // }
    };
    
    return {
	  fullLoading:false,
      method: '',
      saveLoading: false,
      closeLoading: false,
      informationIndicated: {
        attachment: "informationIndicated",
        entityType: "settlementAmount",
      },
      closingReport: {
        attachment: "closingReport",
        entityType: "settlementAmount",
      },
      finalStatement: {
        attachment: "finalStatement",
        entityType: "settlementAmount",
      },
      paymentVoucher: {
        attachment: "paymentVoucher",
        entityType: "settlementAmount",
      },
      informationIndicatedFileList: [], // 历史上传的数据,做展示用
      closingReportFileList: [], // 历史上传的数据,做展示用
      finalStatementFileList: [], // 历史上传的数据,做展示用
      paymentVoucherFileList: [], // 历史上传的数据,做展示用
      files: [], // 新上传的数据
      deleteFiles: [], // 记录删除的 历史数据
      dataForm: {
        csId: "",
        deathAmountYuan: "",
        disabilityAmountYuan: "",
        treatmentAmountYuan: "",
        delayWorkAmountYuan: "",
        disabilityAppraisalAmountYuan: "",
        disabilityAppraisalLevel: -1,
        publicAmountYuan: "",
        employerAmountYuan: "",
        thirdAmountYuan: "",
        otherAmountYuan: "",
        totalAmountYuan: "",
        applyAmountYuan: "",
        selfAmountYuan: "",
        remark: "",
        payTime:'',
        informationIndicatedUploadFlag: 0,
        closingReportUploadFlag: 0,
        finalStatementUploadFlag: 0,
        paymentVoucherUploadFlag: 0,
      },
      outsourcingFlag:0,
      rules: {
        deathAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        disabilityAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        treatmentAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        delayWorkAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        disabilityAppraisalAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        publicAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        employerAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        thirdAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        otherAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        totalAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        applyAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        selfAmountYuan: [
          { validator: validateMoney, trigger: "blur" },
          { required: false, message: "请输入有效金额", trigger: "blur" },
        ],
        remark: [
          { validator: validateRemark, trigger: "blur" },
          { required: false, message: "请输入备注", trigger: "blur" },
        ],
        payTime: [
          { validator: validatePayTime, trigger: "blur" },
          { required: false, message: "请选择打款付款时间", trigger: "blur" },
        ],
        informationIndicatedUploadFlag: [
          {
            required: false,
            validator: validateInformationIndicatedFile,
            trigger: "change",
          },
        ],
        closingReportUploadFlag: [
          {
            required: false,
            validator: validateClosingReportFile,
            trigger: "change",
          },
        ],
        finalStatementUploadFlag: [
          {
            required: false,
            validator: validateFinalStatementFile,
            trigger: "change",
          },
        ],
        paymentVoucherUploadFlag: [
          {
            required: false,
            validator: validatePaymentVoucherFile,
            trigger: "change",
          },
        ],
      },
    };
  },
  components: {
	  PreviewFile
  },
  props: ["claimSettlement"],
  beforeMount() {},
  methods: {
    changeSumAmount() {
		let sumAmount = Number(this.dataForm.deathAmountYuan) + Number(this.dataForm.disabilityAmountYuan) + Number(this.dataForm.treatmentAmountYuan)
					+ Number(this.dataForm.delayWorkAmountYuan) + Number(this.dataForm.disabilityAppraisalAmountYuan) + Number(this.dataForm.publicAmountYuan)
					 + Number(this.dataForm.employerAmountYuan) - Number(this.dataForm.thirdAmountYuan) -Number(this.dataForm.otherAmountYuan)
		this.dataForm.totalAmountYuan = Number(sumAmount).toFixed(2);
	},
    init() {
      this.$http({
        url: this.$http.adornUrl("/claim/settlementamount/info"),
        method: "post",
        contentType: "form",
        params: this.$http.adornParams({
          csId: this.claimSettlement.id,
          caseId: this.claimSettlement.caseId,
        }),
      }).then(({ data }) => {
        console.log("data", data);
        if (data && data.code === 0 && data.data) {
          this.outsourcingFlag = data.data.outsourcingFlag;
          console.log("this.outsourcingFlag", this.outsourcingFlag)
          if(!data.data.settlementAmount.id){
            return
          }
		  if(this.$refs.informationIndicatedUpload){
		  	this.$refs.informationIndicatedUpload.clearFiles();
		  }
		  if(this.$refs.closingReportUpload){
		  	this.$refs.closingReportUpload.clearFiles();
		  }
		  if(this.$refs.finalStatementUpload){
		  	this.$refs.finalStatementUpload.clearFiles();
		  }
          this.dataForm = Object.assign(this.dataForm, data.data.settlementAmount);
          this.dataForm.treatAgainFlag = this.dataForm.treatAgainFlag + "";
          // 处理上传文件
          this.informationIndicatedFileList = [];
          this.closingReportFileList = [];
          this.finalStatementFileList = [];
          this.paymentVoucherFileList = [];
          this.deleteFiles = [];
          this.files = [];
          if (this.dataForm.files) {
            for (let i = 0; i < this.dataForm.files.length; i++) {
              let item = this.dataForm.files[i];
			  let filename = item.filePath;
			  const lastIndex = filename.lastIndexOf('_');
			  const dotIndex = filename.lastIndexOf('.');
			  const newName = `${filename.slice(0, lastIndex)}${filename.slice(dotIndex)}`; 
              let obj = {
                name: newName,
                url: item.filePath,
                id: item.id,
                fileType: item.fileType,
                attachment: item.attachment,
              };
              switch (item.attachment) {
                case "informationIndicated":
                  this.informationIndicatedFileList.push(obj);
                  break;
                case "closingReport":
                  this.closingReportFileList.push(obj);
                  break;
                case "finalStatement":
                  this.finalStatementFileList.push(obj);
                  break;
                case "paymentVoucher":
                  this.paymentVoucherFileList.push(obj);
                  break;
              }
            }
            this.dataForm.informationIndicatedUploadFlag =
              this.informationIndicatedFileList.length;
            this.dataForm.closingReportUploadFlag =
              this.closingReportFileList.length;
            this.dataForm.finalStatementUploadFlag =
              this.finalStatementFileList.length;
            this.dataForm.paymentVoucherUploadFlag =
              this.paymentVoucherFileList.length;
          }
        }
      });
      console.log("status=====", this.claimSettlement)
      
      console.log("status=====", this.claimSettlement.caseStatus)
    },
    save: function (method) {
      this.method = method;
      this.saveLoading = true;
      this.dataForm.csId = this.claimSettlement.id;
      this.dataForm.files = this.files;
      this.dataForm.deleteFiles = this.deleteFiles;
	  // this.changeSumAmount();
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          console.log("valid==", valid);
          this.$http({
            url: this.$http.adornUrl("/claim/settlementamount/" + method),
            method: "post",
            data: this.$http.adornData(this.dataForm),
          }).then(({ data }) => {
            this.saveLoading = false;
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$emit("callBack", null, true);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          this.saveLoading = false;
        }
      });
    },
    litigation: function(){
      this.$confirm('此操作将进行【诉讼】，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.saveLoading = true;
          this.dataForm.csId = this.claimSettlement.id;
          this.$http({
            url: this.$http.adornUrl("/claim/settlementamount/litigation"),
            method: "post",
            data: this.$http.adornData(this.dataForm),
          }).then(({ data }) => {
            this.saveLoading = false;
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$emit("callBack", null, true);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    submitFileUpload: function (req) {
		this.fullLoading = true;
      console.log(req);
      let that = this;
      let reader = new FileReader();
      reader.readAsDataURL(req.file);
      reader.onload = function () {
        let newFileName = that.renameFile(req.file.name, req.file.uid);
        that
          .$http({
            url: that.$http.adornUrl("/migrantWorkers/file/upload"),
            method: "post",
            data: JSON.stringify({ file: reader.result, path: newFileName }),
          })
          .then(({ data }) => {
			  that.fullLoading = false;
            if (data && data.code === 0) {
              let fileParams = {
                fileName: newFileName,
                attachment: req.data.attachment,
                fileType: req.file.type,
                filePath: newFileName,
                entityType: req.data.entityType,
                description: "",
                uid: req.file.uid,
              };
              console.log("gggg", fileParams);
              that.files.push(fileParams);
              that.modifyUploadFlag("upload", req.data.attachment);
			  that.$message.success("上传成功");
            } else if (data && data.msg) {
              that.$message.error(data.msg);
            }
          }).catch(error => {
          // 失败：统一处理错误
          that.$message.error("上传文件异常");
          that.fullLoading = false;
          console.error("上传文件error:", error);
          that[req.data.attachment+`FileList`] = that[req.data.attachment+`FileList`].filter(item => {
            if (item.uid === req.file.uid) {
              return false;
            }
            return true;
          });
        });
      };
    },
	handlePreview: function (req) {
		this.fullLoading = true;
	  console.log("handlePreview", req);
	  let that = this;
	  let filePath = "";
	  let fileType = "";
	  if (req.status === "success") {
	    filePath = req.url;
	    fileType = req.fileType;
	  } else if (req.status === "ready") {
	    filePath = that.renameFile(req.raw.name, req.raw.uid);
	    fileType = req.raw.type;
	  }
	  console.log("fileType",fileType)
	  let type = "preview";
	  // if(fileType.indexOf("image") != -1 || fileType.indexOf("pdf") != -1){
		 //  type = "preview";
	  // }
	  this.$http({
	    url: this.$http.adornUrl("/migrantWorkers/file/download"),
	    method: "post",
	    data: this.$http.adornData(
	      {
	        path: filePath,
	      },
	      false,
	      "json"
	    ),
	  }).then(({ data }) => {
		  that.fullLoading = false;
	    console.log("data", JSON.stringify(data));
	    if (data && data.code === 0) {
			if(type = "preview"){
				//预览
				this.$refs.previewFileRef.showDialog(fileType, data.data, filePath);
			}else{
				that.Base64Util.downloadFile(data.data, filePath, fileType);
			}
	    } else if (data && data.msg) {
	      that.$message.error(data.msg);
	    }
	  });
	},
    handleFileRemove: function (req) {
      console.log("handleFileRemove", req);
      let that = this;
      let status = req.status;
      let filePath = "";
      if (status === "success") {
        filePath = req.url;
      } else if (status === "ready") {
        filePath = that.renameFile(req.raw.name, req.raw.uid);
      }
      that
        .$http({
          url: that.$http.adornUrl("/migrantWorkers/file/delete"),
          method: "post",
          data: JSON.stringify({ path: filePath }),
        })
        .then(({ data }) => {
          if (data && data.code === 0) {
            if (status === "success") {
              that.deleteFiles.push(req.id);
              that.modifyUploadFlag("delete", req.attachment);
            } else if (status === "ready") {
              that.files.some((item, i) => {
                // 删除fileList中对应的元素
                if (item.uid === req.raw.uid) {
                  that.modifyUploadFlag("delete", item.attachment);
                  that.files.splice(i, 1);
                }
              });
            }
			that.$message.success("文件删除成功");
          } else if (data && data.msg) {
            that.$message.error(data.msg);
          }
        });
    },
    modifyUploadFlag: function (oper, attachment) {
      console.log("modifyUploadFlag", oper, attachment);
      let flagVal = 0;
      let that = this;
      switch (oper) {
        case "upload":
          flagVal = 1;
          break;
        case "delete":
          flagVal = -1;
          break;
        default:
          flagVal = 0;
          break;
      }
      switch (attachment) {
        case "informationIndicated":
          that.dataForm.informationIndicatedUploadFlag += flagVal;
          break;
        case "closingReport":
          that.dataForm.closingReportUploadFlag += flagVal;
          break;
        case "finalStatement":
          that.dataForm.finalStatementUploadFlag += flagVal;
          break;
        case "paymentVoucher":
          that.dataForm.paymentVoucherUploadFlag += flagVal;
          break;
      }
    },
    renameFile: function (originFileName, fileUID) {
      if (originFileName == null || originFileName === undefined) {
        return null;
      }
      let fileNameSplit = originFileName.split(".");
      let fileName = "";
      for (let i = 0; i < fileNameSplit.length - 1; i++) {
        if (i < fileNameSplit.length - 2) {
          fileName = fileName + fileNameSplit[i] + ".";
        } else {
          fileName = fileName + fileNameSplit[i];
        }
      }
      // 跟文件名加上时间
      fileName = fileName + "_" + fileUID;
      let fileExtendName = fileNameSplit[fileNameSplit.length - 1];
      return fileName + "." + fileExtendName;
    },
  },
};
</script>

<style>
</style>
